<template>
    <l-page>
        <l-navbar title="房屋按揭申请详情" bgColor="#3c9cff" color="white"></l-navbar>
        <view class="panel text-lg">
            <view :class="`text-lg text-center ${detail.apply_status}`">{{ detail.apply_status_text }}</view>
        </view>
        <view class="panel data">
			<view class="!mb-3 text-blue-300 font-bold">基本信息</view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">所在区域</view>
                <view>{{ detail.area }}</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">楼盘名称</view>
                <view>{{ detail.dm_name }}</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">详细地址</view>
                <view>{{ detail.address }}</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">建筑面积</view>
                <view>{{ detail.floor_area }}平方米</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">成交价</view>
                <view>{{ detail.deal_price }}万元</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">房屋用途</view>
                <view>{{ loan.房屋用途[detail.property_usage as keyof typeof loan.房屋用途] }}</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">首付</view>
                <view>{{ detail.down_payment }}成</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">贷款金额</view>
                <view>{{ detail.loan_amount }}万</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">贷款期限</view>
                <view>{{ detail.loan_term }}年</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">申请签约时间</view>
                <view>{{ detail.apply_signing_time }}</view>
            </view>
           
        </view>
		<view class="panel items-center">
		    <view class="!mb-3 text-blue-300 font-bold">业务员</view>
			<view class="flex">
				<u-avatar :src="$imgBase + detail.sales_avatar" shape="square" size="60"></u-avatar>
				<view class="flex-1 mx-3">
					<view class="font-bold">{{ detail.salesman_name }}</view>
					<view class="flex">
						<u-tag text="实名认证" plain size="mini" type="success"></u-tag>
					</view>
				</view>
			</view>
		</view>
		
		<view class="panel" v-if="isShowAny()">
			<view class="!mb-3 text-blue-300 font-bold">审核信息</view>
			<view class="flex items-center justify-between">
			    <view class="w-24 text-gray-400">放贷银行</view>
			    <view>{{ detail.lending_bank }}</view>
			</view>
			<view class="flex items-center justify-between">
			    <view class="w-24 text-gray-400">批准金额</view>
			    <view class="text-blue-600">{{ detail.approved_amount }}万元</view>
			</view>
			
			<view class="flex items-center justify-between">
			    <view class="w-24 text-gray-400">手续费</view>
			    <view class="text-red-500">{{ detail.fee }}元</view>
			</view>
		</view>
		
        <view class="panel !rounded-lg work">
		    <view class="!mb-3 text-blue-300 font-bold">买方信息</view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">真实姓名</view>
                <view>{{ detail.realname }}</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">手机号码</view>
                <view>{{ detail.mobile }}</view>
            </view>
            <view class="flex items-center justify-between">
                <view class="w-24 text-gray-400">婚姻状况</view>
                <view>{{ loan.婚姻状况[detail.marital_status as keyof typeof loan.婚姻状况] }}</view>
            </view>
            <view v-if="detail.id_photo_front">
                <view class="mb-2">身份证正面</view>
                <u-image width="300" height="200" :src="$imgBase + detail.id_photo_front"></u-image>
            </view>
            <view v-if="detail.id_photo_back">
                <view class="mb-2">身份证反面</view>
                <u-image width="300" height="200" :src="$imgBase + detail.id_photo_back"></u-image>
            </view>
        </view>
        <view class="bg-white p-3 border-gray-200 border-t" v-if="is_ywy == 1">
            <orderSubmit :is_ysf="1" :apply_status="detail.apply_status" :id="loan_id" @update="back" />
        </view>
        <view class="bg-white p-3 border-gray-200 border-t" v-if="detail.apply_status == 'wait_pay' && is_ywy == 0">
            <pay :is_ysf="1" :loan_apply_id="loan_id" @update="back" />
        </view>
    </l-page>
</template>
<script setup lang="ts">
import Order from "@/stores/order";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import Setting from "@/stores/settings"
import Loan from "@/stores/loan"
import orderSubmit from "./components/submit.vue"

import Pay from "./components/pay.vue"
const loan = Loan()
const order = Order(), detail = ref<any>({}), setting = Setting(), loan_id = ref(), is_ywy = ref();
const getDetail = () => {
    let ajax = is_ywy.value == 1 ? order.ysf_apply_wait_detail : order.ysf_apply_history_detail;
    ajax(loan_id.value).then((res: any) => {
        detail.value = res
    })
}
const back = () => {
    uni.navigateBack()
}
onLoad((option: any) => {
    loan_id.value = option.loan_id
    is_ywy.value = option.is_ywy
    getDetail()
})
const isShowAny = () => {

    return detail.value.apply_status == 'wait_pay' || detail.value.apply_status == 'complete';
}
</script>
<style scoped lang="scss">
.data>view,
.house>view,
.work>view {
    @apply my-2;
}
</style>